<template>
  <div class="w-full header_box">
    <div
      v-if='showHead'
      class="hd-top"
    >
      <div class="hd-top-inner">
        <div class="hd-top-lf">
          <slot name="top-slot"></slot>
        </div>
        <login-bar></login-bar>
      </div>
    </div>
    <div class="hd-body" v-if="showHeadBody">
      <div class="nav-inner">
        <div class="head_left">
        <div class="head_logo" @click="navigateTo('/')">
          <!-- <i class="iconfont icon-iconfonticon-shousu"></i> -->
          <!-- <img src="../../assets/images/logo/logo.png" alt="" srcset=""> -->
          <img
            class="logo p-rel"
            :src="toplogo"
            alt="交易所logo"
          >
        </div>
          
        <ul class="nav-bar clearfix">
          <li class="nav-item p-rel" :class='currentPath==coinPrice.link?"active":""'>
              <router-link :to='coinPrice.link'>
              <span
                class="fl"
                v-text="$t(coinPrice.i18nKey)||item.coinPrice"
              ></span>&nbsp;
              <i
                v-if='coinPrice.subItem'
                class="iconfont icon-xiala"
              ></i>
              </router-link> 
          </li>
          <!-- 币币交易 -->
          <li
            class="nav-item p-rel"
            :class='currentPath==mainCoin.link?"active":""'
          >
            <router-link :to='mainCoin.link'>
              <span
                class="fl"
                v-text="$t(mainCoin.i18nKey)||item.mainCoin"
              ></span>&nbsp;
            </router-link>
          </li>
          <!-- 其他交易 -->
          <li
            v-for='(item,i) in navBarCfg'
            :key='i'
            class="nav-item p-rel"
            :class='currentPath==item.link?"active":""'
          >
            <router-link :to='item.link?item.link:""'>
              <span v-text="$t(item.i18nKey)||item.label"></span>&nbsp;
              <i
                v-if='item.subItem'
                class="iconfont icon-xiala"
              ></i>
            </router-link>
            <ol
              class="sub-nav p-abs"
              v-if="item.subItem"
            >
              <li
                class="sub-nav-item p-rel"
                v-for="(sItem,j) in item.subItem"
                :key='j'
              >
                <router-link :to="sItem.link?sItem.link:''">
                  <span v-text="$t(sItem.i18nKey)||sItem.label"></span>
                  <i
                    v-if='sItem.type'
                    class="iconfont icon-arrow-right abs-v-center rt-0"
                  ></i>
                </router-link>
              </li>
              <li class="sub-nav-item p-rel">
                <a
                  target="view_window"
                  :href="agreementUrl"
                >
                  <span v-text="$t('agreement')"></span>
                </a>
              </li>
            </ol>
          </li>
        </ul>
        </div>
        <!--  -->
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import mainCoinModel from "@/model/allCoinModel.js";
export default {
  name: "my-header",
  components: {  },
  props: {
    showHeadTop: Boolean,
    showHeadBody: {
      default: true,
      type: Boolean
    },
    headLogo: {
      type: String,
      default: require("@/assets/images/logo/logo.png")
    },
  },
  data() {
    return {
      toplogo:require("@/assets/images/logo/logo.png"),
      activeIndex: '1',
      // activeIndex: 0,
      currentPath: "",
      showHead: false,
      // 币种类型
      currencyConfig: [],
      coinPrice:{
          i18nKey: "label300",
          label: "行情",
          link: "/coinPrice",
          
          subItem: null
      },
      mainCoin: {
        i18nKey: "Ptxt113",
        label: "币币交易",
        link: "/currency_trade",
        subItem: null
      },
      // 用户协议地址
      agreementUrl: "/#/help_center/privacy",
      showLoading: true,
      navBarCfg: [
        {
          i18nKey: "ptxt120",
          label: "承兑交易",
          link: "/FrTrade/c2cTrade"
        },
        // {
        //   i18nKey: "ptxt114",
        //   label: "法币交易",
        //   link: "/FabiNew/c2cTrade"
        // },
          {
          // i18nKey: "ptxt114",
          label: "矿机",
          link: "/mill"
        },
        {
          i18nKey: "helpCenter",
          label: "帮助中心",
          subItem: [
            {
              i18nKey: "anouncement",
              label: "系统公告",
              link: "/help_center/h_home"
            },
            {
              i18nKey: "listing",
              label: "上币申请",
              link: "/upcoinInfo"
            },
          ]
        }
      ],
      subNavIndex: "",
      areaOne:''
    };
  },
  mounted() {
    // this.showHead = this.showHeadTop;
    this.currentPath = this.$route.path;
    return
    // 币币交易币种列表
    if (mainCoinModel.maincoin) {
      this.mainCoin.subItem = mainCoinModel.maincoin;
    } else {
      this.getMainCoin();
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    // 查看交易板块
    getarea(){
      //request 二次封装的ajax， this.request().then(res=>{}) 通过函数调用拿到后端传递的数据
      this.request(this.api.getarea).then(res => {
        // console.log(`交易板块:${JSON.stringify(res)}`);
        this.area=1;
        if (res && res.code == "0"){
          this.areaOne=res.data[0].areaid;
        }
      });
    },
    //主币种
    getMainCoin() {
      this.request(this.api.getmaincoin,{area:1}).then(res => {
        // console.log(`主币种:${JSON.stringify(res)}`);
        if (res && res.code != "0") {
          this.getDataFaild(res.msg);
          return false;
        }
        // console.log(res.data[0]);
        
        let list = null;
        res.data && res.data && (list = res.data.slice(0));
        list.map(item => {
          item.coinid && (item.i18nKey = `${item.coinid.toLowerCase()}Market`);
        });
        // console.log(list);
        
        this.mainCoin.subItem = mainCoinModel.maincoin = list;
        mainCoinModel.coinid = list[0].maincoin;
        // console.log(mainCoinModel.coinid);
        this.$bus.emit("mainCoinLoad", mainCoinModel.coinid);
      });
    },
    getTradeCoin(coin, index) {
      if (
        window.sessionStorage &&
        window.sessionStorage.getItem(`sub_${index}`)
      ) {
        this.currencyConfig = JSON.parse(
          window.sessionStorage.getItem(`sub_${index}`)
        );
        this.$bus.emit("navChange", this.currencyConfig);
        return false;
      }
      if (this.subNavIndex && this.subNavIndex == index) return false;
      this.subNavIndex = index;
      this.showLoading = true;
      this.request(this.api.getTradCoin, {
        maincoin: coin,
        area:1,
      }).then(res => {
        if (res.code == "0") {
          this.currencyConfig = res.data;
        }
        if (window.sessionStorage) {
          window.sessionStorage.setItem(
            `sub_${index}`,
            JSON.stringify(res.data)
          );
        }
        // this.storage.set(`sub_${index}`, res.data.list);
        this.$bus.emit("navChange", this.currencyConfig);
        this.showLoading = false;
      });
    }
  },
  beforeDestroy() {
    this.$bus.off("userLoaded");
  }
};
</script>
<style lang="scss">
.hd-top {
  background: $main-bg-color;
  margin: 0 auto;
}
</style>
<style lang="scss" scoped>
.header_box{
  .hd-body {
    // color: #fff;
    @include textVcenter(48px);
    .el-menu.el-menu--horizontal {
      border: none;
    }
    .nav-inner {
      display: flex;
      height: 100%;
      justify-content:space-between;
      .head_left{display: flex;width: 70%;min-width: 900px;}
      .head_logo{
        height: 48px;
        width: 180px;
        display: flex;
        align-items:center;
        margin-right: 5px;
      .logo {
        // width: 130px;
        margin-left: 90px;
        cursor: pointer;
      }
        i{font-size: 20px;}
      }
    }
    
.nav-bar {
  height: 100%;
  margin-left: 2%;
  cursor: pointer;
  text-align: center;
  .nav-item {
    float: left;
    font-size: $font-default;
    @media screen and (max-width: 1280px) {
      font-size: $font-default;
    }

    &:hover {
      .sub-nav {
        display: block;
      }
    }
  }
  .iconfont {
    font-size: $font-normal;
  }
  li {
    transition: all 0.4s;
    padding: 0 15px;
    @media screen and (max-width: 1280px) {
      font-size: $font-default;
      padding: 0 10px;
    }
    a {
      display: inline-block;
      height: inherit;
      width: inherit;
      i{float: right;}
    }
  }
}
.sub-nav {
  min-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  z-index: 100;
  left: 0;
  top: 48px;//下拉菜单定位
  display: none;
  background: $bg-dark;
  .sub-nav-item {
    @include textVcenter;
    &:first-child {
      border-top: none;
    }
    .iconfont {
      display: block;
      margin-right: 5px;
    }
    a {
      margin-left: -10px;
      width: 100%;
      @media screen and (max-width: 1280px) {
        margin-left: -5px;
      }
    }
    &:hover {
      .nav-container {
        display: block;
      }
    }
  }
  .nav-container {
    display: none;
    left: 100%;
    top: 0;
    z-index: 100;
  }
  a {
    color: #333333;
  }
}
}
  .ml-25 {
    margin-left: 25px;
  }
  .mr-25 {
    margin-right: 25px;
  }
.hd-top {
  font-size: $font-mini;
  @include textVcenter;
  span {
    display: inline-block;
    color: #fff;
  }
  .hd-top-lf {
    height: 40px;
    @include float;
    box-sizing: border-box;
    .iconfont {
      font-size: 12px;
    }
  }
}


}
</style>
